<template>
  <view class="card" v-if="order">
    <view class="cardTit"
      >您有<text
        >{{
          order.verify_card.length + order.coupon_card.length
        }}张卡券及优惠券未使用</text
      >，请及时使用！</view
    >
    <view class="cardItem" v-for="item of order.verify_card" :key="item.id">
      <view class="img">
        <image :src="item.pic_url" mode="aspectFill"></image>
      </view>
      <view class="txt">
        <view class="con">
          <view class="name">{{ item.name }}</view>
        </view>
        <view class="icon_qrocde" v-if="item.type === '1'">
          <icon class="iconfont icon-QRcode" @click="toCancle(item)"></icon>
        </view>
        <view v-if="status === 3" class="btn" @click="handleClick(item)">{{
          getCouponText(parseInt(item.type))
        }}</view>
      </view>
    </view>

    <view class="couponItem" v-for="item of order.coupon_card" :key="item.id">
      <view class="line">
        <view></view>
        <view></view>
      </view>

      <view class="let">
        <view class="title">{{ item.name }}</view>
        <view class="time">{{ item.begin_time }}-{{ item.end_time }}</view>
      </view>
      <view class="rig">
        <view :class="['price', item.discount_type === 1 ? 's2' : 's1']">{{
          item.discount_type === 1 ? item.discount : item.sub_price
        }}</view>
        <view class="text">满{{ item.min_price }}可用</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    order: {
      type: Object,
      default: () => {
        return null;
      },
    },

    status: {
      type: Number,
      default: 0,
    },
  },

  computed: {
    getCouponText() {
      return (type) => {
        let str;

        switch (type) {
          case 1:
            str = this.$t("writeOff.toCancle");
            break;

          case 2:
            str = this.$t("coupon.pickUpGoods");
            break;

          case 3:
            str = this.$t("coupon.recharge");
            break;

          case 4:
            str = this.$t("coupon.see");
            break;

          case 5:
            str = this.$t("coupon.watchOnline");
            break;
        }

        return str;
      };
    },
  },

  methods: {
    toCancle(item) {
      let { sale_id } = item;
      this.$utils.toUrl(
        "/user/write_off_card/card_qrcode/card_qrcode?card_sale_id=" + sale_id
      );
    },
    handleClick(item) {
      let type = parseInt(item.type),
        { status, video_status, sale_id } = item;

      switch (type) {
        case 1:
          if (status === "0") {
            let { name, latitude, longitude, address } = this.order.md_info;
            uni.openLocation({
              name,
              latitude: parseFloat(latitude),
              longitude: parseFloat(longitude),
              address,
            });
          }
          break;

        case 2:
          this.$utils.toUrl(
            "/user/write_off_card/card-list/shop-card?id=" + sale_id
          );
          break;

        case 3:
          uni.showModal({
            title: "提示",
            content: "确认充值？",
            success: (res) => {
              if (res.confirm) {
                this.$allrequest.coupon
                  .verifyExchange({
                    sale_id,
                  })
                  .then((res) => {
                    if (!res.code) {
                      uni.showToast({
                        title: "充值成功！",
                        duration: 2000,
                      });
                      this.$emit("callBack");
                    }
                  });
              } else if (res.cancel) {
              }
            },
          });
          break;

        case 4:
          this.$utils.toUrl(
            "/user/write_off_card/card-list/password-card?id=" + sale_id
          );
          break;

        case 5:
          if (video_status === "1") {
            uni.showToast({
              title: "该视频卡已过期！",
              duration: 3000,
              icon: "none",
            });
            return;
          }
          this.$utils.toUrl(
            "/user/write_off_card/card-list/video-card?id=" + sale_id
          );
          break;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.card {
  background: #ffffff;
  padding: 40rpx 36rpx;
  margin-bottom: 24rpx;
  border-radius: 20rpx;
}

.cardTit {
  padding-bottom: 10rpx;
  font-size: 30rpx;
  font-weight: bold;
  color: #262626;

  text {
    color: #f0250e;
  }
}

.cardItem {
  display: flex;
  align-items: center;
  margin-top: 24rpx;
  padding: 20rpx;
  background: #fdf0f0;
  border: 2rpx solid #fdd6d0;
  border-radius: 20rpx;

  .img {
    overflow: hidden;
    margin-right: 20rpx;
    width: 92rpx;
    height: 92rpx;
    background: #fff;
    border-radius: 10px;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .txt {
    flex: 1;
    overflow: hidden;
    color: #f0250e;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .con {
      flex: 1;
      overflow: hidden;
    }
    .icon_qrocde {
      icon {
        font-size: 42rpx;
      }
      margin-right: 10rpx;
    }
    .btn {
      width: 140rpx;
      height: 55rpx;
      line-height: 55rpx;
      border-radius: 32px;
      color: #fff;
      background: #f0250e;
      text-align: center;
      font-size: 24rpx;
    }

    .name,
    .num {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    .name {
      font-size: 32rpx;
      font-weight: bold;
    }

    .num {
      padding-top: 8rpx;
      font-size: 22rpx;
    }
  }
}

.couponItem {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24rpx;
  padding: 10rpx 24rpx;
  min-height: 132rpx;
  background: #fdf0f0;
  border-radius: 20rpx;

  .line {
    position: absolute;
    left: -10rpx;
    right: -10rpx;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: -12rpx;

    view {
      width: 24rpx;
      height: 24rpx;
      background: #fff;
      border-radius: 32px;
    }
  }

  .let {
    flex: 1;
    overflow: hidden;
    margin-right: 10rpx;
  }

  .title {
    padding-bottom: 10rpx;
    font-size: 30rpx;
    color: #262626;
    font-weight: bold;
  }

  .time,
  .text {
    font-size: 22rpx;
    color: #8c8c8c;
  }

  .price {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    font-size: 48rpx;
    color: #f0250e;
    font-weight: bold;
    line-height: 1;
    flex: 1;
    overflow: hidden;

    &.s1:before {
      content: "¥";
      font-size: 28rpx;
      padding-bottom: 4rpx;
    }

    &.s2:after {
      content: "折";
      font-size: 28rpx;
      padding-bottom: 4rpx;
    }
  }
}
</style>
